<template>
    <div class="main">
       <!-- 搜索框 -->
        <div class="topSearch">
            <div class="search">
                <input type="text" name="" id="" placeholder="输入名词搜索" v-model="name">
                <i class="el-icon-search" @click="selectNounData()"></i>
            </div>
        </div>
        <div class="top glossaryDetail">
            <div class="left">
                <div class="leftmain">
                    <p>{{form.prExplain}}
                    </p>
                </div>
                
            </div>
            <div class="right">
                <div class="img">
                    <img src="../../../../images/img1.png" alt="">
                </div>
                
            </div>

            <div class="v-icon">
                <span>{{form.name}}</span>
            </div>
        </div>
        <div class="bottom">
            <!-- <router-link to="/common">
                
            </router-link> -->
            <span class="v-btn active" @click="backPage">返回</span>
            
        </div>
    </div>
    
</template>

<script>
export default {
    data(){
        return{
            nounId:"",
            prExplain:"",
            clickPage:1,
            name:"",
            key:"",
            form:{
                name:"",
                prExplain:""
            }
        }
    },
    created(){
        this.nounId = this.$route.params.id
        this.key = this.$route.params.name
        this.clickPage = this.$route.params.page
        this.selectNounById()
    },
    methods:{
        selectNounData(){
            this.$router.push({
                path: '/common',
                name: `commonPage`,
                params: {
                    name: this.name,
                    page: this.clickPage
                }
            })
        },
        // 根据id查询名词数据
        selectNounById(){
            this.$api.selectNounById(this.nounId).then(result=>{
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.success){
                        _this.form = result.data.data
                        // _this.prExplain = result.data.data.prExplain
                    }
                })
                
            })
        },
        backPage(){
            this.$router.push({
                path: '/common',
                name: `commonPage`,
                params: {
                    name: this.key,
                    page: this.clickPage
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.main{
  height: 100%;  
}
.top{
    position: relative;
    display: flex;
    height: 55%;
    margin-top:100px;
    border-radius: 30px;
    background: #fff;
    border:2px solid #989898;
    justify-content: center;
    .left,.right{
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .left {
        width: 70%;
        text-align: left;
        .leftmain{
            width: 90%;
            height: 80%;
        }
        p{
            font-size: 16px;
            font-family: "Microsoft Yahei";
            font-weight: 600;
            color: #78394D;
            line-height: 30px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            overflow: hidden;
            
        }
    }
    .right{
        width: 30%;
        .img{
            width: 65%;
            height: 50%;
        }
        img{
            width:100%;
            height: 100%;
        }
    }
    .v-icon{
        left:0%;
        top:-10%;
    }
}
.bottom{
    text-align: right;
    .v-btn{
        margin-top:10px;
        margin-right:20px;
    }
}
</style>